<template>
  <!--        购物车部分-->
  <div class="cart">
    <div class="cart-left">
      <div class="cart-left-icon">
<!--        <i class="fa fa-shopping-cart"></i>-->
        <img src="src/assets/icons/cart/cart.png">
        <div v-if="totalNum" class="cart-left-icon-quantity">{{totalNum}}</div>
      </div>
      <div class="cart-left-info" v-if="totalPrice">
        <p >&#165;{{totalPrice}}</p>
        <p>另需配送费3元</p>
      </div>
    </div>
    <div class="cart-right">
      <!--                两种情况 同一时间只能显示一个-->
      <!--                不够起送费-->
      <div v-if="totalPrice<business.starPrice" class="cart-right-item-deny ">&#165;{{business.starPrice}}起送</div>
      <!--                够起送费-->
      <div v-else class="cart-right-item-accept" @click="gotoOrder">去结算</div>
    </div>
  </div>
</template>


<script setup>
import {computed, watch, onMounted, nextTick, defineProps, getCurrentInstance,ref,onUpdated} from "vue";
import {useRouter} from "vue-router";
import {getSessionStorage} from "../../main.js";
import footer from "./Footer.vue";
import axios from "axios";  // Import defineProps from Vue


let internalInstance = getCurrentInstance();

let message=internalInstance.appContext.config.globalProperties.$message

const props= defineProps(['foodList', 'businessId']);
const router = useRouter();
const business=ref({});
// const orderedList=ref({})

// 使用 watch 来监听 foodList 的变化
// watch(() => props.foodList, (newFoodList) => {
//   // 确保 foodList 有值后再执行逻辑
//   if (newFoodList && newFoodList.length > 0) {
//     orderedList.value = [];
//     newFoodList.forEach((item) => {
//       if (item.quantity !== 0) {
//         orderedList.value.push(item);
//       }
//     });
//   }
// });
watch(() => props.businessId, (newBusinessId) => {
  // console.log("props.businessId changed:", newBusinessId);
  getBusiness(newBusinessId);
});
async function getBusiness(businessId) {
  const response = await axios.get("/business/getBusinessById", {params: {businessId: businessId}})
  // console.log(props.businessId)
  business.value=response.data
}

  const totalNum = computed(() => {
    let t = 0;
    for (let i = 0; i < props.foodList.length; i++) {
      t += props.foodList[i].quantity;
    }
    return t;
  });

  const totalPrice = computed(() => {
    let p = 0;
    for (let i = 0; i < props.foodList.length; i++) {
      p += props.foodList[i].quantity * props.foodList[i].foodPrice;
    }
    return p;
  });

  // const store = useStore();


  // 使用 watch 来监听 totalNum 的变化
  watch(totalNum, (newVal) => {
    // 在 totalNum 发生变化时，触发 mutation 来更新 Vuex 中的值
    // store.commit("setTotalNum", { key: businessId, value: newVal });
    localStorage.setItem(props.businessId.toString(), newVal);
  });

// 路由导航
  function gotoOrder() {

    // if (getSessionStorage("user")==null){
    //   message.error("未登录或者登录失效")
    //   router.push("/login")
    //   return;
    // }
    router.push({path:'/order',query:{businessId:props.businessId}});
  }

</script>
<style scoped>
/*购物车部分*/
 .cart{
  width: 100%;
  height: 14vw;
  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
}
 .cart .cart-left{
  flex: 2;
  background-color: #505051;
  display: flex;
}
 .cart .cart-left .cart-left-icon{
  width: 16vw;
  height: 16vw;
  box-sizing: border-box;
  border: solid 1.6vw #444;
  border-radius: 8vw;
  background-color: #3190E8;
  font-size: 7vw;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -4vw;
  margin-left: 3vw;

  position: relative;
}
.cart .cart-left .cart-left-icon img{
  width: 30px;
  height: 30px;
}
 .cart .cart-left .cart-left-icon .cart-left-icon-quantity{
  width: 5vw;
  height: 5vw;
  border-radius: 2.5vw;
  background-color: red;
  color: white;
  font-size: 3.6vw;
  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  right: -1.5vw;
  top: -1.5vw;
}
 .cart .cart-left .cart-left-info p:first-child{
  font-size: 4.5vw;
  color: white;
  margin-top: 1vw;
}
 .cart .cart-left .cart-left-info p:last-child{
  font-size: 2.8vw;
  color: #AAA;
  /*margin-top: 0;*/

}

 .cart .cart-right {
  flex:1;

  display: flex;
}
/*达到起送费*/
 .cart .cart-right .cart-right-item-accept{
  background-color: #38CA73;
  width: 100%;
  height: 100%;
  color: white;
  font-size: 4.5vw;
  font-weight: 700;
  user-select: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;

}
/*未达到配送费*/
 .cart .cart-right .cart-right-item-deny{
    background-color: #535356;
    width: 100%;
    height: 100%;
    color: white;
    font-size: 4.5vw;
    font-weight: 700;
    user-select: none;

    display: flex;
    justify-content: center;
    align-items: center;

}
</style>


<!--<script>-->
<!--import store from "../../store/index.js";-->
<!--import {mapGetters} from "vuex";-->
<!--import router from "../../router/router.js";-->
<!--import { defineProps } from 'vue';  // Import defineProps from Vue-->

<!--export default {-->
<!--  name: "Cart",-->
<!--  // props: {-->
<!--  //   foodList:Array,-->
<!--  //   businessId:Number-->
<!--  // },-->
<!--  setup(){-->
<!--    let {foodList,businessId}=defineProps(["foodList","businessId"])-->
<!--    function gotoOrder(){-->
<!--      router.push({ path: '/order', query: { foodList: this.foodList } });-->
<!--    }-->

<!--    return{-->
<!--      foodList,-->
<!--      businessId,-->
<!--      gotoOrder-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    // console.log(this.foodList)-->
<!--  },-->
<!--  computed:{-->
<!--    totalNum(){-->
<!--      let t=0;-->
<!--      for(let i=0;i<this.foodList.length;i++){-->
<!--          t+=this.foodList[i].quantity-->
<!--      }-->
<!--      return t;-->
<!--    },-->
<!--    totalPrice(){-->
<!--      let p=0;-->
<!--      for(let i=0;i<this.foodList.length;i++){-->
<!--        p+=this.foodList[i].quantity*this.foodList[i].foodPrice-->
<!--      }-->
<!--      return p-->
<!--    },-->
<!--    // ...mapGetters(['getTotalNum'])-->
<!--  },-->
<!--  watch:{-->
<!--    totalNum(newVal) {-->
<!--      // 在 totalNum 发生变化时，触发 mutation 来更新 Vuex 中的值-->
<!--      // store.commit("setTotalNum",{key:this.businessId,value: newVal})-->
<!--      // console.log(this.foodList)-->
<!--      localStorage.setItem(this.businessId.toString(), newVal);-->
<!--      // console.log(this.getTotalNum(10001))-->
<!--    },-->
<!--  }-->
<!--}-->
<!--</script>-->